<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <!-- <p>count: {{count}}</p> -->
  </div>

  <script src="../js/vue.js"></script>
  <script>

    /* 
      new Vue实例之后 :
      初始化:
        做了一些关于事件和生命周期的初始化准备工作 (不重要)
        执行beforeCreate()
            不能访问data中的属性
            不能调用methods中的方法
        初始化data/methods/computed/watch
            实现data的数据代理
            实现data的数据劫持
            将methods的方法挂载到vm上, 并指定this为vm
        执行created()
            能访问data中的属性
            能调用methods中的方法
      挂载:
        编译模板:  如果有render函数, 不需要此过程
          将template字符串编译生成render函数   此时还不执行
        执行beforeMount()
        调用render函数生成虚拟DOM => 生成真实DOM, 并替换页面中的el元素显示 (使用patch函数)
        执行mounted()


          
    */
    new Vue({
      el: "#test",
      data: {
        count: 1
      },

      // template: `
      //   <div id="test">
      //     <p>count: {{count}}</p>  
      //   </div>
      // `,

      beforeCreate() {
        debugger
        console.log('beforeCreate', this)
        console.log(this.count) // undefined, 原因在vm还没有count
        // this.test()  // 报错, 原因在vm还没有test
      },

      
      created () {
        debugger
        console.log('created', this)
        console.log(this.count) // 1  能访问data中的属性了
        this.test() // 能调用methods中方法
      },

      beforeMount () {
        console.log('beforeMount')
      },
      render (createElement) {
        console.log('render')
        return createElement('p', {}, this.count)
      },
      mounted () {
        console.log('mounted')
      },

      methods: {
        test () {
          console.log('test()')
        }
      }
    })

    

    /* 
    componnetWillMount
    componnetDidMount
    */
  </script>
</body>
</html>